<div id="org_manager" style="width: 1100px;overflow-x: hidden">
    <div class="org_manager" style="position: relative;width: 1100px;overflow-x: hidden">
                <el-row class="table_search" style="position:fixed;left:220px;top:60px;z-index: 999;width: 1100px">
                    <el-col :span="6">
                        <el-input
                                :clearable="true"
                                prefix-icon="el-icon-search"
                                placeholder="请输入关键字进行过滤"
                                v-model="filterText">
                        </el-input>
                    </el-col>
                    <el-col :span="14" class="text-r">
                        <el-button-group>
                            <el-button type="primary"
                                       icon="el-icon-plus"
                                       :disabled="addButton"
                                       @click="add">新增</el-button>
                            <el-button type="warning"
                                       icon="el-icon-plus"
                                       :disabled="editButton"
                                       @click="edit">修改</el-button>
                            <el-button type="danger"
                                       icon="el-icon-plus"
                                       :disabled="delButton"
                                       @click="del">删除</el-button>
                            <el-button type="info"
                                       icon="el-icon-rank"
                                       :disabled="delButton"
                                       @click="move">移动</el-button>
                            <el-button class="btn-export"
                                       type="primary"
                                       icon="el-icon-download"
                                       @click="exportExcel">导出</el-button>
                        </el-button-group>
                    </el-col>
                    <div id="fengexian" style="position: absolute;left: 0;bottom: -10px;width: 101%;height: 10px;background-color: #f8f9fb"></div>
                </el-row>
                <el-tree
                        id="treeBox"
                        class="filter-tree"
                        node-key="id"
                        ref="orgTree"
                        :props="defaultProps"
                        default-expanded-keys="[1]"
                        :filter-node-method="filterNode"
                        :data="treeData"
                        empty-text="正在加载...."
                        highlight-current="true"
                        @current-change="nodeCheck"
                        @node-click = nodeClick
                        style="padding-top: 80px"
                        >
                </el-tree>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="200px">
            <el-form-item label="上级机构号：" prop="supbak" style="display: none;">
                <el-input v-model="form.supbak" disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="上级机构名称：" prop="supnam" v-if="form.supnam !=''">
                <el-input v-model="form.supnam" disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="机构号：" prop="orgId" style="display: none;">
                <el-input v-model="form.orgId" disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="机构名称：" prop="orgName">
                <el-input v-model="form.orgName"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="机构移动" :visible.sync="moveFormVisible">
        <el-form
                class="add-template-form"
                :rules="moveRules"
                ref="moveForm"
                :model="moveForm"
                label-width="200px">
            <el-form-item label="上级机构号：" prop="supbak" style="display: none;">
                <el-input v-model="moveForm.supbak" disabled="true" ></el-input>
            </el-form-item>
            <el-form-item label="上级机构名称：" prop="supnam" >
                <el-input v-model="moveForm.supnam" @focus="showMenu" readonly="true"></el-input>
                <div id="menuContent"
                     class="menuContent"
                     style="display:none; position: absolute;z-index: 1000;overflow: auto;background-color: white">
                    <el-tree
                            :data="orgTree"
                            :props="defaultProps"
                            @node-click="treeClick"
                            style="margin-top:0; width:180px; height: 300px;"></el-tree>
                </div>
            </el-form-item>
            <el-form-item label="机构号：" prop="orgId" style="display: none;">
                <el-input v-model="moveForm.orgId" disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="机构名称：" prop="orgName">
                <el-input v-model="moveForm.orgName" disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitMoveForm('moveForm')">确 定</el-button>
        </div>
    </el-dialog>
</div>
<!--[if IE]>
<script>
    goIEPage(IEVersion(),'${basePath}/org_list_IE');
</script>
<![endif]-->
<!--[if !IE]><!-->
<script>
        var orgManager = new Vue({
        el: "#org_manager",
        data: {
            boxHeight:'',

            treeData:[],
            orgTree:[],
            addButton:true,
            editButton:true,
            delButton:true,
            filterText:'',
            defaultProps: {
                children: 'children',
                label: 'label',
                isLeaf: 'leaf'
            },
            dialogTitle:'',
            dialogFormVisible:false,
            moveFormVisible:false,
            form: {
                supbak: '',
                supnam: '',
                orgId: '',
                orgName: ''
            },
            moveForm:{
                supbak: '',
                supnam: '',
                orgId: '',
                orgName: ''
            },
            rules: {
                orgnam: [
                    {required: true, message: '请填写机构名称', trigger: 'blur'},
                    { max: 200, message: '长度在 200 个字符以内', trigger: 'blur' }
                ]
            },
            moveRules:{
                supnam: [
                    {required: true, message: '请选择上级机构', trigger: 'blur'},
                ]
            }
        },
        methods: {
            nodeClick:function () {
               // console.log($(".main-right #org_manager").width());
                //this.boxHeight = $(orgManager.$refs.orgTree.$el).height();
                //console.log(this.boxHeight);
                //$(".org_manager .table_search").css({"width":$(".main-right #org_manager").width()});

            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            nodeCheck(data,node){
                if(data.level >=4){
                    orgManager.addButton=true;
                }else{
                    orgManager.addButton=false;
                }
                if(data.id != '1'){
                    orgManager.editButton=false;
                }else{
                    orgManager.editButton=true;
                }
                if(data.leaf){
                    orgManager.delButton=false;
                }else{
                    orgManager.delButton=true;
                }
            },
            add(){
                var parent = orgManager.$refs.orgTree.getCurrentNode();
                orgManager.form.supbak = parent.id;
                orgManager.form.supnam = parent.label;
                orgManager.form.orgId = '';
                orgManager.form.orgName = '';
                orgManager.dialogTitle = '添加机构';
                orgManager.dialogFormVisible = true;
            },
            edit(){
                var node = orgManager.$refs.orgTree.getCurrentNode();
                var parent = orgManager.getNodeByKey(node.supbak);
                console.log(parent);
                orgManager.form.supbak = parent.key;
                orgManager.form.supnam = parent.label;
                orgManager.form.orgId = node.id;
                orgManager.form.orgName = node.label;
                orgManager.dialogTitle = '修改机构';
                orgManager.dialogFormVisible = true;
            },
            del(){
                orgManager.$confirm('此操作将永久删除该机构信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var url = "${basePath}bank/org/del";
                    var options = {
                        'orgId': orgManager.$refs.orgTree.getCurrentNode().id
                    };
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            orgManager.$message.success(resData.msg);
                            orgManager.goPage("/bank/org");
//                            var node = orgManager.$refs.orgTree.getCurrentNode();
//                            var parent = orgManager.getNodeByKey(node.supbak);
//                            var children = parent.children || parent;
//                            var index = children.findIndex(d => d.id === node.id);
//                            children.splice(index, 1);
                        } else {
                            orgManager.$message.error(resData.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            move:function(){
                var node = orgManager.$refs.orgTree.getCurrentNode();
                var parent = orgManager.getNodeByKey(node.supbak);
                orgManager.moveForm.supbak = parent.key;
                orgManager.moveForm.supnam = parent.label;
                orgManager.moveForm.orgId = node.id;
                orgManager.moveForm.orgName = node.label;
                sendService("${basePath}bank/org/getMoveOrgTree", {orgId:node.id}, function (resData) {
                    orgManager.orgTree = resData.t;
                });
                orgManager.moveFormVisible = true;
            },
            goPage: function (url) {
                $(".main-right").empty();
                $(".main-right").load('${basePath}' + url);
            },
            exportExcel(){
                var url = "${basePath}bank/org/exportExcel";
                window.location.href = url;;
            },
            getNodeByKey(id){
                var nodes = orgManager.$refs.orgTree.store.nodesMap;
                return nodes[id];
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var url = "${basePath}bank/org/save";
                        var option = {
                            'orgId': orgManager.form.orgId,
                            'orgName': orgManager.form.orgName,
                            'supbak': orgManager.form.supbak
                        };
                        sendService(url, option, function (resData) {
                            if (resData.status == 'success') {
                                orgManager.dialogFormVisible = false;
                                var node = orgManager.$refs.orgTree.getCurrentNode();
//                                if(resData.token == 'add'){
//                                    node.children.push(resData.t);
//                                }else{
                                    orgManager.goPage("/bank/org");
//                                    var node = orgManager.$refs.orgTree.getCurrentNode();
//                                    var parent = orgManager.getNodeByKey(node.supbak);
//                                    var children = parent.children || parent;
//                                    console.log(children);
//                                    var index = children.findIndex(d => d.id === node.id);
//                                    children.splice(index, 1,resData.t);
    //                            }
                                orgManager.$message.success("操作成功！");
                            } else {
                                orgManager.$message.error(resData.msg);
                            }
                        });
                    } else {
                        orgManager.$message.error("表单验证失败，请检查");
                        return false;
                    }
                });
            },
            showMenu(event){
                $("#menuContent").slideDown("fast");
                $("body").bind("mousedown", function(event){
                    if (!(event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                        $("#menuContent").fadeOut("fast");
                        $("body").unbind("mousedown");
                    }
                });
            },
            treeClick:function(o,node,tree){
                orgManager.moveForm.supbak = o.id;
                orgManager.moveForm.supnam = o.label;
                $("#menuContent").fadeOut("fast");

            },
            submitMoveForm:function(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var url = "${basePath}bank/org/saveMove";
                        var option = {
                            'orgId': orgManager.moveForm.orgId,
                            'supbak': orgManager.moveForm.supbak
                        };
                        sendService(url, option, function (resData) {
                            if (resData.status == 'success') {
                                orgManager.dialogFormVisible = false;
                                var node = orgManager.$refs.orgTree.getCurrentNode();
                                orgManager.goPage("/bank/org");
                                orgManager.$message.success("操作成功！");
                            } else {
                                orgManager.$message.error(resData.msg);
                            }
                        });
                    } else {
                        orgManager.$message.error("表单验证失败，请检查");
                        return false;
                    }
                });
            }
        },
        watch: {
            filterText(val) {
                this.$refs.orgTree.filter(val);
            },

        },
        computed:{
                changgeHeight:function () {
                    var height = $('.org_manager').height();
                    return this.boxHeight = height;
                }
        },
        created:function(){
            var url = '${basePath}bank/org/getOrgTree';
            var options = {};
            sendService(url, options, function (resData) {
                if (resData.status == 'success') {
                    orgManager.treeData = resData.t;
                } else {
                    orgManager.$message.error("机构树加载失败");
                }
            });
        }
    });
</script>
<!--<![endif]-->
<style scoped>
    .org_manager .table_search{
        border-top: 20px solid #f8f9fb;
        height: 80px;
    }
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }
    .cla_409EFF{
        color: #409EFF;
    }
    .cla_5a5e66{
        color: #5a5e66;
    }
    .main-right{
        overflow-x: hidden;
    }
    html,body{
        overflow-x: hidden;
    }
</style>
